<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="css/indexLess.css" />
	</head>

	<body> 
		<div class="navTop">
			<div class="container">
				<div class="row">
					<div class="col-xs-4">
						<button class="btn btn-default btn-xs" type="button">
							<span class="glyphicon glyphicon-earphone"></span>
						</button> &nbsp;+0123 456 70 90
					</div>
					<div class="col-xs-8">
						<form action="##" method="post" class="navbar-form pull-right">
							<div class="form-group pull-right">
								<input type="text" class="input-sm form-control" />
								<button class="btn btn-defalut btn-xs" type="submit">
									<span class="glyphicon glyphicon-search"></span>
								</button>
							</div>
							<div class="pull-right">
								<button class="btn btn-danger btn-xs" type="button">
									<span class="glyphicon glyphicon-font"></span>
								</button>
								<button class="btn btn-danger btn-xs" type="button">
									<span class="glyphicon glyphicon-font"></span>
								</button>
								<button class="btn btn-danger btn-xs" type="button">
									<span class="glyphicon glyphicon-font"></span>
								</button>
								<button class="btn btn-danger btn-xs" type="button">
									<span class="glyphicon glyphicon-font"></span>
								</button>
								<button class="btn btn-danger btn-xs" type="button">
									<span class="glyphicon glyphicon-font"></span>
								</button>
							</div>

						</form>
					</div>
				</div>
			</div>
			<!--end container-->
		</div>
		<!--end navTop-->
		<!--下方导航栏-->
		<nav class="navbar navbar-inverse">
			<div class="container">
				<div class="navbar-header">
					<button class="btn btn-default navbar-toggle" data-toggle="collapse" data-target="#show">
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<div class="navbar-brand">
						<a href="###">
							<img src="images/logo.png" />
						</a>
					</div>
				</div>
				<!--end navbar-header-->

				<div class="collapse navbar-collapse" id="show">
					<div class="navR">
						<ul class="nav navbar-nav">
							<li>
								<button class="btn btn-danger">Home</button>
							</li>
							<li>
								<button class="btn btn-danger">About Us</button>
							</li>
							<li>
								<button class="btn btn-danger">Services</button>
							</li>
							<li>
								<button class="btn btn-danger">Portfolio</button>
							</li>
							<li class="dropdown">
								<button class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
									Pages
									<span class="caret"></span>
								</button>
								<ul class="dropdown-menu">
									<li>
										<a href="##">Blog Single</a>
									</li>
									<li>
										<a href="##">Pricing</a>
									</li>
									<li>
										<a href="##">404</a>
									</li>
									<li>
										<a href="##">Shortcodes</a>
									</li>
								</ul>
							</li>
							<li>
								<button class="btn btn-danger">Blog</button>
							</li>
							<li>
								<button class="btn btn-danger">Contact</button>
							</li>
						</ul>
					</div>
					<!--end pull-right-->
				</div>
				<!--end collapse-->
			</div>
			<!--end container-->
		</nav>

		<!--start 轮播图-->
		<div class="carousel slide" id="picShow" data-ride="carousel" data-interval="3000" data-pause="false">
			<ol class="carousel-indicators">
				<li data-slide-to="0" data-target="#picShow" class="active"></li>
				<li data-slide-to="1" data-target="#picShow"></li>
				<li data-slide-to="2" data-target="#picShow"></li>
			</ol>

			<div class="carousel-inner">
				<div class="item active">
					<a href="##"><img src="images/slider/bg1.jpg" /></a>
					<div class="carousel-caption">
						<h2 class="text-left">Lorem ipsum dolor sit amet<br> consectetur adipisicing elit</h2>
						<p class="text-left">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</p>
						<p class="text-left">
							<button type="button" class="btn btn-danger">Read More</button>
						</p>
					</div>
				</div>
				<!--end 1-->

				<div class="item">
					<a href="##"><img src="images/slider/bg2.jpg" /></a>
					<div class="carousel-caption">
						<h2 class="text-left">Lorem ipsum dolor sit amet<br> consectetur adipisicing elit</h2>
						<p class="text-left">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</p>
						<p class="text-left">
							<button type="button" class="btn btn-danger">Read More</button>
						</p>
					</div>
				</div>
				<!--end 2-->

				<div class="item">
					<a href="##"><img src="images/slider/bg3.jpg" /></a>
					<div class="carousel-caption">
						<h2 class="text-left">Lorem ipsum dolor sit amet<br> consectetur adipisicing elit</h2>
						<p class="text-left">Accusantium doloremque laudantium totam rem aperiam, eaque ipsa...</p>
						<p class="text-left">
							<button type="button" class="btn btn-danger">Read More</button>
						</p>
					</div>
				</div>
				<!--end 3-->
			</div>
			<!--end carousel-inner-->

			<!--控制器-->
			<a href="#picShow" class="carousel-control left" data-slide="prev">
				<span class="glyphicon glyphicon-chevron-left"></span>
			</a>

			<a href="#picShow" class="carousel-control right" data-slide="next">
				<span class="glyphicon glyphicon-chevron-right"></span>
			</a>
		</div>
		<!--end 轮播图-->
		<div class="bgColor">
			<div class="container">
				<div class="Features text-center">
					<h2>Features</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut</p>
					<p>et dolore magna aliqua. Ut enim ad minim veniam</p>
				</div>
				<!--Features-->

				<div class="row">
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-object pull-left">
								<span class="glyphicon glyphicon-bullhorn"></span>
							</div>
							<div class="media-body">
								<div class="media-heading">
									<h3>Fresh and Clean</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
								</div>
							</div>
						</div>
						<!-- end media-->
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-object pull-left">
								<span class="glyphicon glyphicon-book"></span>
							</div>
							<div class="media-body">
								<div class="media-heading">
									<h3>Fresh and Clean</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
								</div>
							</div>
						</div>
						<!-- end media-->
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-object pull-left">
								<span class="glyphicon glyphicon-cloud"></span>
							</div>
							<div class="media-body">
								<div class="media-heading">
									<h3>Fresh and Clean</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
								</div>
							</div>
						</div>
						<!-- end media-->
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-object pull-left">
								<span class="glyphicon glyphicon-bullhorn"></span>
							</div>
							<div class="media-body">
								<div class="media-heading">
									<h3>Fresh and Clean</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
								</div>
							</div>
						</div>
						<!-- end media-->
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-object pull-left">
								<span class="glyphicon glyphicon-book"></span>
							</div>
							<div class="media-body">
								<div class="media-heading">
									<h3>Fresh and Clean</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
								</div>
							</div>
						</div>
						<!-- end media-->
					</div>
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-object pull-left">
								<span class="glyphicon glyphicon-cloud"></span>
							</div>
							<div class="media-body">
								<div class="media-heading">
									<h3>Fresh and Clean</h3>
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
								</div>
							</div>
						</div>
						<!-- end media-->
					</div>
				</div>
				<!--end row-->

			</div>
			<!--end container-->
		</div>
		<!--end bgColor-->

		<div class="container styleShow">
			<div class="Recent">
				<h2 class="text-center">Recent Works</h2>
				<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
				<p class="text-center">et dolore magna aliqua. Ut enim ad minim venia</p>
			</div>

			<div class="row">
				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item1.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item2.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item3.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item4.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item5.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item6.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item7.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

				<div class="col-xs-12 col-sm-4 col-md-3">
					<img src="images/portfolio/recent/item8.png" width="100%" alt="" />
					<div class="info">
						<h3>Business theme</h3>
						<p>There are many variations of passages of Lorem Ipsum available, but the majority</p>
						<a href="##">
							<span class="glyphicon glyphicon-eye-open"></span> View
						</a>
					</div>
				</div>
				<!-- end col-xs-12-->

			</div>
			<!--end row-->
		</div>
		<!-- end showStsyel-->

		<div class="service">
			<div class="container">
				<div class="our text-center">
					<h2>Our Service</h2>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut </p>
					<p>et dolore magna aliqua. Ut enim ad minim veniam</p>
				</div>
				<!-- end our-->

				<div class="row">
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-heading pull-left">
								<img src="images/services/services1.png" alt="" />
							</div>
							<div class="media-body">
								<h3>SEO Marketing</h3>
								<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
							</div>
						</div>
						<!--end media-->
					</div>
					<!--end 1-->

					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-heading pull-left">
								<img src="images/services/services2.png" alt="" />
							</div>
							<div class="media-body">
								<h3>SEO Marketing</h3>
								<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
							</div>
						</div>
						<!--end media-->
					</div>
					<!--end 2-->

					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-heading pull-left">
								<img src="images/services/services3.png" alt="" />
							</div>
							<div class="media-body">
								<h3>SEO Marketing</h3>
								<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
							</div>
						</div>
						<!--end media-->
					</div>
					<!--end 3-->
					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-heading pull-left">
								<img src="images/services/services3.png" alt="" />
							</div>
							<div class="media-body">
								<h3>SEO Marketing</h3>
								<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
							</div>
						</div>
						<!--end media-->
					</div>
					<!--end 3-->

					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-heading pull-left">
								<img src="images/services/services5.png" alt="" />
							</div>
							<div class="media-body">
								<h3>SEO Marketing</h3>
								<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
							</div>
						</div>
						<!--end media-->
					</div>
					<!--end 5-->

					<div class="col-xs-12 col-sm-6 col-md-4">
						<div class="media">
							<div class="media-heading pull-left">
								<img src="images/services/services6.png" alt="" />
							</div>
							<div class="media-body">
								<h3>SEO Marketing</h3>
								<p>Lorem ipsum dolor sit ame consectetur adipisicing elit</p>
							</div>
						</div>
						<!--end media-->
					</div>
					<!--end 6-->

				</div>
				<!-- end row-->
			</div>
		</div>
		<!-- end service -->

		<div class="news">
			<div class="container">
				<div class="row">
					<div class="col-xs-12 col-sm-6">
						<h2>Our Skills</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
						<p class="fColor">Graphic Design</p>
						<div class="progress">
							<div class="progress-bar" style="width: 85%;">85%</div>
						</div>
						<p class="fColor">HTML</p>
						<div class="progress">
							<div class="progress-bar progress-bar-success" style="width: 95%;">95%</div>
						</div>
						<p class="fColor">CSS</p>
						<div class="progress">
							<div class="progress-bar progress-bar-warning" style="width: 80%;">80%</div>
						</div>
						<p class="fColor">Wordpress</p>
						<div class="progress">
							<div class="progress-bar progress-bar-danger" style="width: 90%;">90%</div>
						</div>
					</div>
					<!--进度条-->

					<div class="col-xs-12 col-sm-6">
						<h2>Why People like us?</h2>
						<div class="panel-group" id="myPanel">
							<!--panel面板被包含在一个面板组里面-->

							<div class="panel panel-warning">
								<div class="panel-heading">
									<h3 class="panel-title pull-left">Lorem ipsum dolor sit amet?</h3>
									<button class="btn btn-defalut pull-right"  data-parent="#myPanel" data-toggle="collapse" data-target="#panel1" type="button">
										<span class="glyphicon glyphicon-menu-right"></span>
									</button>
								</div>
								<!--折叠区将包含到panel-collapse.collapse这个容器里面-->
								<div class="panel-collapse collapse in" id="panel1">
									<div class="panel-body">
										<div class="media">
											<div class="media-heading pull-left">
												<img src="images/accordion1.png"/>
											</div>
											<div class="media-body">
												<h4>Adipisicing elit</h4>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
											</div>											
										</div>
									</div>
								</div>
							</div><!--end panel 1-->
							
							<div class="panel panel-warning">
								<div class="panel-heading">
									<h3 class="panel-title pull-left">Lorem ipsum dolor sit amet?</h3>
									<button class="btn btn-defalut pull-right"  data-parent="#myPanel" data-toggle="collapse" data-target="#panel2" type="button">
										<span class="glyphicon glyphicon-menu-right"></span>
									</button>
								</div>
								<!--折叠区将包含到panel-collapse.collapse这个容器里面-->
								<div class="panel-collapse collapse" id="panel2">
									<div class="panel-body">
										<div class="media">
											<div class="media-heading pull-left">
												<img src="images/accordion1.png"/>
											</div>
											<div class="media-body">
												<h4>Adipisicing elit</h4>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
											</div>											
										</div>
									</div>
								</div>
							</div><!--end panel 2-->
							
							<div class="panel panel-warning">
								<div class="panel-heading">
									<h3 class="panel-title pull-left">Lorem ipsum dolor sit amet?</h3>
									<button class="btn btn-defalut pull-right"  data-parent="#myPanel" data-toggle="collapse" data-target="#panel3" type="button">
										<span class="glyphicon glyphicon-menu-right"></span>
									</button>
								</div>
								<!--折叠区将包含到panel-collapse.collapse这个容器里面-->
								<div class="panel-collapse collapse" id="panel3">
									<div class="panel-body">
										<div class="media">
											<div class="media-heading pull-left">
												<img src="images/accordion1.png"/>
											</div>
											<div class="media-body">
												<h4>Adipisicing elit</h4>
												<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</p>
											</div>											
										</div>
									</div>
								</div>
							</div><!--end panel 3-->							
						</div><!-- end panel-group-->
					</div><!--手风琴-->
				</div><!--end row-->
			</div><!--end container-->

		</div>
		<!--end news-->

		<script src="js/jquery-1.12.4.min.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script>
			$(function() {
				$(".navTop input[type='text']").hover(function() {
					$(this).prop("placeholder", "Search");
					$(this).stop().animate({
						width: "120px"
					});
				}, function() {
					$(this).prop("placeholder", "");
					$(this).stop().animate({
						width: "60px"
					});
				});

				//				$(window).scroll(function(e){
				//					var height = $(document).scrollTop();
				//					console.log(height);
				//					if(height>=130){
				//						//类名不要加.
				//						$(".Features").slideDown(1000);						
				//					}
				//					if(height>=400){
				//						$(".bgColor .row").slideDown(1000);
				//					}
				//				});
			});
		</script>
	</body>

</html>